import { Switch, Route, Redirect, withRouter } from 'react-router-dom'
import React from "react"
// 导入组件
// import Login from '../page/Login/Login'
const Home = React.lazy(() => import("../views/Home/Home.jsx"))
const Index = React.lazy(() => import("../pages/Index/Index.jsx"))
const Detail = React.lazy(() => import("../pages/Detail/Detail.jsx"))
const Cate = React.lazy(() => import("../views/Cate/Cate.jsx"))
const Cart = React.lazy(() => import("../views/Cart/Cart.jsx"))
// import Index from '../pages/Index/Index.jsx'
// import WineShopList from '../page/WineShopList/WineShopList'
// import WineShopDetail from '../page/WineShopDetail/WineShopDetail'
// import MovieList from '../page/MovieList/MovieList'
// import MovieDetail from '../page/MovieDetail/MovieDetail'
// 自定义路由规则
const routes = [
    {
        path: "/",//路径
        redirect: "/index/home",//重定向
        exact: true,//是否精准匹配 true是 false否
    },
    // 普通路由规则
    {
        path: "/index/home",//路径
        component: Home,//组件
        exact: true,//是否精准匹配 true是 false否
        isLogin: false,//是否需要登录验证 true 是 false否
    },
    {
        path: "/index/cart",//路径
        component: Cart,//组件
        exact: true,//是否精准匹配 true是 false否
        isLogin: false,//是否需要登录验证 true 是 false否
    },
    {
        path: "/index/cate",//路径
        component:Cate,//组件
        exact: true,//是否精准匹配 true是 false否
        isLogin: false,//是否需要登录验证 true 是 false否
    },
    {
        path: "/index",//路径
        component: Index,//组件
        exact: true,//是否精准匹配 true是 false否
        isLogin: false,//是否需要登录验证 true 是 false否
    },
    {
        path: "/detail/:id",//路径
        component: Detail,//组件
        exact: true,//是否精准匹配 true是 false否
        isLogin: false,//是否需要登录验证 true 是 false否
    },
    // {
    //     path:"/login",
    //     component:Login,
    //     extract:true,//是否精准匹配 true 是 false 否
    //     isLogin:false, //是否需要做登录验证 true 是 false否
    //     meta:{title:"登录页面"}//路由元信息
    // },
    // {
    //     path:"/wineshopList",
    //     component:WineShopList,
    //     extract:true,//
    //     isLogin:false,
    //     meta:{title:"酒店列表"}
    // },
    // {
    //     path:"/movieList",
    //     component:MovieList,
    //     extract:true,
    //     isLogin:false,
    //     meta:{title:"电影列表"}
    // },
    // {
    //     path:"/wineShopDetail",//设置为动态路由
    //     component:WineShopDetail,
    //     exact:true,//是否精准匹配
    //     isLogin:false,//是否需要登录验证
    //     meta:{title:"酒店详情"}//路由元信息
    // },
    // {
    //     path:"/movieDetail/:id",
    //     component:MovieDetail,
    //     exact:true,
    //     isLogin:false,
    //     meta:{title:"电影列表"}
    // },
    // {
    //     path:"*",
    //     component:NotFound,
    //     exact:true,//是否精准匹配 true是 false否
    //     isLogin:false,//是否需要登录验证
    //     meta:{title:"404页面"},//路由元信息
    // }

]


// 声明函数组件
function RouterView() {
    return (
        <React.Suspense fallback={<h3>loading...</h3>}>
            <Switch>
            {routes.map(item=>{
                // 判断是否有component
                if(item.component){
                   return <Route key={item.path} path={item.path} exact={item.exact}
                   render={()=>{
                    //    render属性其目的是为了渲染组件  可以做条件判断
                    // component属性其目的也是为了渲染组件
                    
                    // 1.设置路由元信息
                    if(item.meta) document.title = item.meta.title
                    // 2.登录验证
                    if(item.isLogin){
                        // 需要登录
                        if(!sessionStorage.getItem('user')){
                            return <Redirect to="/login"></Redirect>
                        }
                    }
                    const Component= withRouter(item.component)
                    return <Component></Component>

                   }}></Route>    
                }

                // 此处没有componnet  即为路由重定向
                return <Redirect key={item.path} path={item.path} to={item.redirect} exact={item.exact}></Redirect>
            })}
        </Switch>
        </React.Suspense>

    )
}


// 导出组件
export default RouterView